<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-clearmin.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/roboto.css">
    <link rel="stylesheet" type="text/css" href="assets/css/material-design.css">
    <link rel="stylesheet" type="text/css" href="assets/css/small-n-flat.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/highlight.css">
    <title>Clearmin Docs</title>
    <style>.panel > h3{margin:0;padding:20px;border-bottom:1px solid #ddd;}
      .anchor{position:relative;top:-70px}
      body { position: relative;}
    </style>
  </head>
  <body class="cm-no-transition cm-1-navbar" data-spy="scroll" data-target="#cm-menu-scroller">
    <div id="cm-menu">
      <nav class="cm-navbar cm-navbar-turquoise">
        <div class="cm-flex cm-logo" style="background-image:url(assets/img/logo.svg)"></div>
        <div class="btn btn-turquoise md-menu-white" data-toggle="cm-menu"></div>
      </nav>
      <div id="cm-menu-content">
        <div id="cm-menu-items-wrapper">
          <div id="cm-menu-scroller">
            <ul class="cm-menu-items nav">
              <li><a href="#a0" class="md-home">Home</a></li>
              <li><a href="#a1" class="md-flash-on">Quick start</a></li>
              <li><a href="#a2" class="md-web">General structure</a></li>
              <li><a href="#a3" class="md-more-horiz">Navbars</a></li>
              <li><a href="#a4" class="md-menu">Left menu</a></li>
              <li><a href="#a5" class="md-image">SVG Icons</a></li>
              <li><a href="#a6" class="md-developer-mode">Less Variables</a></li>
              <li><a href="#a7" class="md-settings-applications">Javascript options</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <header id="cm-header">
      <nav class="cm-navbar cm-navbar-turquoise">
        <div class="btn btn-turquoise md-menu-white hidden-md hidden-lg" data-toggle="cm-menu"></div>
        <div class="cm-flex"><h1>Clearmin Docs <i class="fa fa-fw fa-angle-right"></i> <span id="oksub">Home</span></h1></div>
      </nav>
    </header>
    <div id="global">
      <div class="anchor" id="a0"></div>
      <div class="container-fluid cm-container-white">
        <h2 style="margin-top:0">Clearmin 1.0 documentation</h2>
	<blockquote>
          <p>This document describe how to use and customize Clearmin bootstrap template. For topics not covered by this document, please refer to the official Bootstrap v3.3.4 documentation on <a href="http://getbootstrap.com/">http://getbootstrap.com/</a></p>
        </blockquote>
	<table class="table">
	  <tbody>
	    <tr>
	      <td><strong>Version</strong></td>
	      <td>1.0</td>
	    </tr>
	    <tr>
	      <td><strong>Released</strong></td>
	      <td>May, 2015</td>
	    </tr>
	    <tr>
	      <td><strong>Type</strong></td>
	      <td>HTML Template</td>
	    </tr>
	    <tr>
	      <td><strong>Bootstrap</strong></td>
	      <td>Compatible with 3.3.x</td>
	    </tr>
	    <tr>
	      <td><strong>Layouts</strong></td>
	      <td>
		<i class="fa fa-fw fa-check"></i> Responsive<br>
		<i class="fa fa-fw fa-check"></i> Fluid<br>
	      </td>
	    </tr>
	    <tr>
	      <td><strong>Browsers</strong></td>
	      <td>
		<i class="fa fa-fw fa-check"></i> IE 9, 10, 11<br>
		<i class="fa fa-fw fa-check"></i> Latest Chrome<br>
		<i class="fa fa-fw fa-check"></i> Latest Firefox<br>
		<i class="fa fa-fw fa-check"></i> Latest Opera<br>
		<i class="fa fa-fw fa-check"></i> Latest Safari<br>
	      </td>
	    </tr>
	    <tr>
	      <td><strong>Uses Less</strong></td>
	      <td>Yes</td>
	    </tr>
	    <tr>
	      <td><strong>Uses Sass</strong></td>
	      <td>No</td>
	    </tr>
	  </tbody>
	</table>
      </div>
      <div class="container-fluid">
	<div style="height:20px"></div>
	<div class="anchor" id="a1"></div>
        <div class="panel panel-default">
	  <h3>1. Quick start</h3>
          <div class="panel-body">
	    <p>To start using Clearmin template in a new project you can use this <a href="minimal.html">minimal template</a> :</p>
	    <pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/bootstrap-clearmin.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/roboto.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/material-design.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/small-n-flat.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/font-awesome.min.css&quot;&gt;
    &lt;title&gt;Clearmin Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body class=&quot;cm-no-transition cm-1-navbar&quot;&gt;
    &lt;div id=&quot;cm-menu&quot;&gt;
      &lt;nav class=&quot;cm-navbar cm-navbar-primary&quot;&gt;
        &lt;div class=&quot;cm-flex&quot;&gt;&lt;div class=&quot;cm-logo&quot;&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class=&quot;btn btn-primary md-menu-white&quot; data-toggle=&quot;cm-menu&quot;&gt;&lt;/div&gt;
      &lt;/nav&gt;
      &lt;div id=&quot;cm-menu-content&quot;&gt;
        &lt;div id=&quot;cm-menu-items-wrapper&quot;&gt;
          &lt;div id=&quot;cm-menu-scroller&quot;&gt;
            &lt;ul class=&quot;cm-menu-items&quot;&gt;
              &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;sf-house&quot;&gt;This page is active&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;header id=&quot;cm-header&quot;&gt;
      &lt;nav class=&quot;cm-navbar cm-navbar-primary&quot;&gt;
        &lt;div class=&quot;btn btn-primary md-menu-white hidden-md hidden-lg&quot; data-toggle=&quot;cm-menu&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;cm-flex&quot;&gt;&lt;h1&gt;Put your title here&lt;/h1&gt;&lt;/div&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div id=&quot;global&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;div class=&quot;panel panel-default&quot;&gt;
          &lt;div class=&quot;panel-body&quot;&gt;
            &lt;h2 style=&quot;margin:0&quot;&gt;Hello World !&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer class=&quot;cm-footer&quot;&gt;&lt;span class=&quot;pull-right&quot;&gt;&amp;copy; ACME Inc.&lt;/span&gt;&lt;/footer&gt;
    &lt;/div&gt;
    &lt;script src=&quot;assets/js/lib/jquery-2.1.3.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/js/jquery.mousewheel.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/js/jquery.cookie.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/js/fastclick.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/js/clearmin.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>

	      <div class="alert alert-info" style="margin-bottom:0">
		<i class="fa fa-fw fa-info-circle"></i> Note that every clearmin-specific classes and ids are <code>cm-</code> prefixed.
	      </div>

	  </div>
	</div>

	<div class="anchor" id="a2"></div>
        <div class="panel panel-default">
	  <h3>2. General structure</h3>
          <div class="panel-body">

	    <h4>2.1. CSS and JS files</h4>
	    <p><strong>CSS files (<code>&lt;head&gt;</code>) :</strong></p>
            <ul>
              <li>assets/css/roboto.css (main font)</li>
              <li>assets/css/bootstrap-clearmin.css (bootstrap theme)</li>
              <li>assets/css/material-design.css (material design svg icons classes)</li>
              <li>assets/css/small-n-flat.css (small-n-flat svg icons classes)</li>
              <li>assets/css/font-awesome.min.css (iconic font classes)</li>
            </ul>
            <p><strong>Javascript files (just before <code>&lt;/body&gt;</code>) :</strong></p>
            <ul>
              <li>assets/js/lib/jquery-2.1.3.min.js (required by bootstrap)</li>
              <li>assets/js/lib/jquery.mousewheel.min.js (catch some scrolling events)</li>
              <li>assets/js/lib/jquery.cookie.min.js (cookie manipulation plugin)</li>
              <li>assets/js/lib/fastclick.min.js (enhance mobile device click events)</li>
              <li>assets/js/bootstrap.min.js (bootstrap js widgets)</li>
              <li>assets/js/clearmin.js (required by clearmin)</li>
            </ul>

	    <hr>

	    <h4>2.2. Body classes</h4>
	    <ul>
              <li>cm-no-transition : <strong>must</strong> be present to prevent certain browser to start transition on page load</li>
              <li>cm-1-navbar : when one navbar is present on your page</li>
              <li>cm-2-navbar : when two navbars are present on your page</li>
              <li>cm-3-navbar : when three navbars are present on your page</li>
              <li>cm-menu-toggled : if you want the menu to be toggled on page load (see next section)</li>
            </ul>

	    <hr>
	    <h4>2.3. Preserving left menu state between pages</h4>

	    <p>When the user choose to use the condensed version of the side menu, we want it to stay in this state when the user click on another page. To achieve this, a cookie is automatically set to reflect the menu state.</p>
            <p>You got two different way to restore this state :</p>
            <ul>
              <li>
                <strong>Server-side</strong> (recommended) :
		when your server receive a cookie named &quot;cm-menu-toggled&quot; with value &quot;true&quot;, just add <code>.cm-menu-toggled</code> class to the body tag.
              </li>
              <li>
                <strong>Client-side</strong> : Nothing to do, <code>.cm-menu-toggled</code> is automaticaly added to the body when needed but it can cause a blinking reflow on certain browsers (e.g. Google Chrome)
              </li>
            </ul>


	    <hr>
	    <h4>2.4. <i class="fa fa-warning"></i> Content containers</h4>
	    <ul>
              <li>Dont forget the <code>&lt;div id=&quot;global&quot;&gt;</code> to contain the page (e.g. <a href="minimal.html">minimal template</a>)</li>
	      <li>Use one or many <code>&lt;div class=&quot;container-fluid&quot;&gt;</code> to contain your content</li>
	    </ul>
	  </div>
	</div>


	<div class="anchor" id="a3"></div>
        <div class="panel panel-default">
	  <h3>3. Navbars <small>(header)</small></h3>
          <div class="panel-body">
	    <p>Here is the minimal code to build a Clearmin navbar (those must be placed inside <code>&lt;header id=&quot;cm-header&quot;&gt;</code>) :</p>
	    <pre><code class="html">&lt;nav class=&quot;cm-navbar cm-navbar-default&quot;&gt;
&lt;div class=&quot;cm-flex&quot;&gt;&lt;/div&gt;
&lt;/nav&gt;</code></pre>
	    <ul>
	      <li><code>.cm-flex</code> will take all available space, other direct child elements will be square shaped (unless width is specified)</li>
	      <li>You can replace <code>.cm-navbar-default</code> class by one of our predifined color. (e.g. <code>.cm-navbar-turquoise</code>)</li>
	    </ul>
	    
	    <p>
	      You can add as many buttons as you want, before and after <code>.cm-flex</code>.<br>
	      You have to specify pull-right class when an item is on right<br>
	      Several types of widgets can be inserted in it :
	    </p>
	    <ul>
	      <li>Breadcrumbs (default and primary navs only)</li>
	      <li>Tabs (default nav only)</li>
	      <li>Search Bar</li>
	      <li>Popovers</li>
	      <li>Dropdowns...</li>
	    </ul>
	    <p>Check <a href="navbars.html">this demo page</a> and pick what you need !</p>

	      <div class="alert alert-info" style="margin-bottom:0">
		<i class="fa fa-fw fa-info-circle"></i> Add <code>.cm-navbar-slideup</code> class to the <code>&lt;nav&gt;</code> to hide it when user scroll down.
	      </div>

	  </div>
	</div>


	<div class="anchor" id="a4"></div>
        <div class="panel panel-default">
	  <h3>4. Left menu</h3>
          <div class="panel-body">

	    <h4>4.1. Structure</h4>
	    <p>Here is a basic example : </p>
	    <pre><code class="html">&lt;div id=&quot;cm-menu&quot;&gt;
  &lt;nav class=&quot;cm-navbar cm-navbar-primary&quot;&gt;
    &lt;div class=&quot;cm-flex&quot;&gt;&lt;div class=&quot;cm-logo&quot;&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;btn btn-primary md-menu-white&quot; data-toggle=&quot;cm-menu&quot;&gt;&lt;/div&gt;
  &lt;/nav&gt;
  &lt;div id=&quot;cm-menu-content&quot;&gt;
    &lt;div id=&quot;cm-menu-items-wrapper&quot;&gt;
      &lt;div id=&quot;cm-menu-scroller&quot;&gt;
        &lt;ul class=&quot;cm-menu-items&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;index.html&quot; class=&quot;sf-house&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

	    <p>If you want to add some custom html content in that menu, you should include it into the <code>&lt;ul class=&quot;cm-menu-items&quot;&gt;</code> to prevent eventual scroll bugs when menu content exceed page height.</p>

	    <hr>
	    <h4>4.2. Logo</h4>
	    <p>You can change the brand logo by editing the last lines of <code>bootstrap-clearmin.css</code> / <code>bootstrap-clearmin.min.css</code> : </p>
	    <pre><code class="css">#cm-menu .cm-logo {
  background: url(../img/your-logo-here.ext) no-repeat 15px center;
}</code></pre>
	    <hr>
	    <h4>4.3. Submenu items</h4>
	    <p>Only one level of submenu is currently supported, here is the code to add one :</p>
	    <pre><code class="html">&lt;li class=&quot;cm-submenu&quot;&gt;
  &lt;a class=&quot;an-icon-class&quot;&gt;My Submenu &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;link1.html&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;link2.html&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;link3.html&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;</code></pre>

	    <div class="alert alert-info" style="margin-bottom:0">
	      <i class="fa fa-fw fa-info-circle"></i> To open a submenu on page load add the class <strong>.pre-open</strong> (<code>&lt;li class=&quot;cm-submenu pre-open&quot;&gt;</code>)
	    </div>
	  </div>
	</div>


	<div class="anchor" id="a5"></div>
        <div class="panel panel-default">
	  <h3>5. SVG icons</h3>
          <div class="panel-body">

	    <p>
	      Clearmin provide a bunch of 24x24px svg icons in addition to the famous <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome icons</a>.<br>
	      To use them as a background image, you can use classes present into <code>assets/css/small-n-flat.css</code> and <code>assets/css/material-design.css</code>.<br>
	      To lighten those files, you may delete the classes you don't use.
	    </p>

	    <div class="row">
	      <div class="col-md-4 text-center">	      
		<a href="ico-sf.html" class="well" style="display:block;text-decoration:none;" target="_blank">
		  <span class="svg-48"><img src="assets/img/sf/cat.svg"></span>
		  <h4>Small-n-flat (<code>.sf-*</code>)</h4>
		  <span style="color:#777">assets/img/sf/</span>
		</a>
	      </div>
	      <div class="col-md-4 text-center">
		<a href="ico-md.html" class="well" style="display:block;text-decoration:none;" target="_blank">
		  <span class="svg-48"><img src="assets/img/md/dark/android.svg"></span>
		  <h4>Material design (<code>.md-*</code>)</h4>
		  <span style="color:#777">assets/img/md/dark/</span>
		</a>
	      </div>
	      <div class="col-md-4 text-center">
		<a href="ico-md.html" class="well" style="display:block;text-decoration:none;background:#222" target="_blank">
		  <span class="svg-48"><img src="assets/img/md/light/android.svg"></span>
		  <h4 style="color:#fff">Material design white (<code>.md-*-white</code>)</h4>
		  <span style="color:#aaa">assets/img/md/light/</span>
		</a>
	      </div>
	    </div>
	  </div>
	</div>




	<div class="anchor" id="a6"></div>
        <div class="panel panel-default">
	  <h3>6. Less Variables</h3>
          <div class="panel-body">
	    <p>Some variables in <code>clearmin-global.less</code> can be usefull to customize css file :</p>
	    <pre><code class="less">@cm-translen-global:150ms; // Transition duration for layout based animations
@cm-translen-widget:150ms; // Transition duration for modal, popovers, dropdown...
@cm-translen-button:75ms; // Transition duration for .btn items
@cm-menu-width:262px; // Left menu width
@cm-border-global:#ccc; // Default border color for several items
@cm-underliner-height:3px; // Height of underline in left menu and nav tabs</code></pre>

	      <div class="alert alert-info" style="margin-bottom:0">
		<i class="fa fa-fw fa-info-circle"></i> It's a good idea to customize <code>@brand-primary</code> in <code>variables.less</code> to reflect dominant color in an harmonious way.
	      </div>
	  </div>
	</div>


        <div class="anchor" id="a7"></div>
        <div class="panel panel-default">
          <h3>7. Javascript Options</h3>
	  <div class="panel-body">
	    <p>Some init options may be changed in <code>clearmin.js</code> / <code>clearmin.min.js</code>.</p>
	    <p>Here are the default options : </p>
	    <pre><code class="javascript">$(function(){CM.init({
    'navbarHeight' : 50, /* should be changed reflecting @navbar-height less variable */
    'menuSwiper' : true, /* enable swipe gesture (toggle menu) */
    'menuSwiperIOS' : true, /* enable swipe gesture for ios devices */
    'restoreMenuState' : true /* activate client-side menu state restoration */
})});</code></pre>	   
	  </div>
	</div>


        <div class="panel panel-default">
          <h3>Credits</h3>
	  <div class="panel-body">
	    <ul>
	      <li><a href="http://getbootstrap.com/">Bootstrap</a> css front-end framework.</li>
	      <li><a href="http://jquery.com/">jQuery</a> fast, small, and feature-rich JavaScript library.</li>
	      <li><a href="http://hackerwins.github.io/summernote/">Summernote</a> Super Simple WYSIWYG Editor on Bootstrap</li>
	      <li><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> The iconic font and CSS toolkit</li>
	      <li><a href="https://www.google.com/fonts/specimen/Roboto">Roboto</a> Google font</li>
	      <li><a href="https://github.com/paomedia/small-n-flat">Small-n-flat icons</a> SVG icons on a 24px grid</li>
	      <li><a href="https://github.com/google/material-design-icons">Material Design Icons</a> Google SVG icons</li>
	      <li><a href="http://d3js.org/">D3.js</a> Data-Driven Documents</li>
	      <li><a href="http://c3js.org/">C3.js</a> D3-based reusable chart library</li>
	      <li><a href="https://highlightjs.org/">Highlight.js</a> Syntax highlighting for the Web</li>
	      <li><a href="https://github.com/ftlabs/fastclick">Fastclick</a> Polyfill to remove click delays on browsers with touch UIs</li>
	      <li><a href="https://github.com/carhartl/jquery-cookie">Jquery-cookie</a> A simple, lightweight jQuery plugin for reading, writing and deleting cookies</li>
	      <li><a href="https://github.com/jquery/jquery-mousewheel">Jquery-mousewheel</a> A jQuery plugin that adds cross-browser mouse wheel support</li>
	    </ul>
	  </div>
	</div>


      </div>
      <footer class="cm-footer"><span class="pull-right">&copy; PAOMEDIA SARL</span></footer>
    </div>
    <script src="assets/js/lib/jquery-2.1.3.min.js"></script>
    <script src="assets/js/lib/highlight.pack.js"></script>
    <script src="assets/js/jquery.mousewheel.min.js"></script>
    <script src="assets/js/jquery.cookie.min.js"></script>
    <script src="assets/js/fastclick.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/clearmin.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script>
      $("body").on('activate.bs.scrollspy', function () {
      var t = $(".cm-menu-items li.active").text();
      if(t) $('#oksub').text(t);});
    </script>
  </body>
</html>
